<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>老师列表</title>
    <link th:href="@{/img/Bandit.ico}" rel="icon">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{commons/common::BackHeader}"></div>
    <div class="layui-body">

        <table id="teachers-list" lay-filter="teachersTable"></table>

    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/html" id="teachersBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="teachersHeadBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delCheckIDS">批量删除</button>
    </div>
</script>
<script th:inline="javascript">
    var roleList = [[${roleList}]];
</script>
<script type="text/javascript"  th:inline="none">

    var prefix_back = '/back/teachers';
    var prefix_front = '/front';

    layui.use(['element', 'layer', 'util','table'], function() {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , $ = layui.$;
        //执行渲染
        table.render({
            elem: '#teachers-list' //指定原始表格元素选择器（推荐id选择器）
            ,url: prefix_back + '/query'
            ,width: 1600
            ,toolbar: '#teachersHeadBar'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'tid',fixed:true, title: 'ID', sort: true}
                ,{field:'tName',fixed:true, title: '姓名'}
                ,{field:'roleID',fixed:true, title: '职位',templet: function (d) {
                        for (i=0;i<roleList.length;i++){
                            if (d.roleID == roleList[i].rid){
                                return roleList[i].roleName
                            }
                        }
                    }}
                ,{field:'details',fixed:true,  title: '描述'}
                ,{fixed: 'right', title:'操作', toolbar: '#teachersBar', width:200}
            ]] //设置表头
            ,page: true
            ,limit:10
        });

        //toolBar
        table.on('tool(teachersTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                window.location.href = prefix_front +"/teachers/toDetails/" + data.tid;
            }else if(layEvent === 'del'){//删除
                layer.confirm('确定要删除吗', function(index){
                    $.ajax({
                        url: prefix_back + "/delete?tid=" + data.tid,
                        success:function (){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                    })
                });
            } else if(layEvent === 'edit'){//编辑
                window.location.href = prefix_back + "/edit?tid=" + data.tid;
            }
        });

        //批量删除
        table.on('toolbar(teachersTable)', function(obj){
            //获取选中的数据
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delCheckIDS':
                    if(checkStatus.data.length<=0){
                        layer.msg('未选中任何值');
                        break;
                    }else {
                        let len = checkStatus.data.length;
                        let dataArray = [];
                        for(let i = 0;i<len;i++){
                            dataArray.push(checkStatus.data[i].tid)
                        }
                        layer.confirm('确定要删除吗？',{
                            btn:['确认','取消']
                        },function () {
                            layer.msg('删除成功');
                            // layer.alert(JSON.stringify(dataArray));
                            //提交后台删除
                            $.ajax({
                                type:'POST',
                                url: prefix_back + "/deleteByIDS",
                                data:{
                                    "tids":dataArray.toString()
                                },
                                dataType:'json'
                                ,success(){
                                    setTimeout(function(){
                                        parent.layer.closeAll();
                                        window.location.reload();
                                    },1000)
                                }
                            })
                        },function () {
                            layer.closeAll()
                        })
                        break;
                    }
            }
        });
    });
</script>
</body>
</html>